<template>
	<view class="app-classify-page-one bg-white">
		<view class="app-classify-page-one__search e-flex bg-white">
			<view class="app-classify-page-one__search-body e-flex-1" @tap="$goTo('/pages/classify/search/index')">
				<text class="iconfont icon-sousuo e-m-r-20 e-font-28 c-primary"></text>
				<text class="e-font-26 c-regular">{{ $t('classify.搜索商品') }}</text>
			</view>
			<view class="app-classify-page-one__search-right e-p-14 e-rela" :style="[cartBoxStyle]" @tap="jump">
				<e-badge type="error" max="99" :value="cartProductAll" absolute :offset="[-3, 5]">
					<text class="iconfont icon-gouwuche2 e-font-36 c-primary"></text>
				</e-badge>
			</view>
		</view>

		<one-classify :skin="AppSkin" v-model="menuIndex" :list="menuList"></one-classify>
		<view class="classify-list">
			<two-classify
				:list="classifyList"
				:refresherEnabled="menuIndex > 0"
				:classifyId="classifyId"
				@prev="handleSwitchPrev"
				@next="handleSwitchNext"
				:type="type"
			></two-classify>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { getGoodsClassify, getGoodsClassifyTwo, getStoreGrouping } from '@/common/request/api';
import type { ClassifyItem } from '@/common/request/api';
import oneClassify from './one-classify.vue';
import twoClassify from './two-classify.vue';
import { useCurrentInstance } from '@/common/hooks';
import { useInit, useShoppingCart } from '@/common/stores';
import { storeToRefs } from 'pinia';
import type {PickPromise} from '@/typings'

const props = defineProps({
	type: Number
});

const ctx = useCurrentInstance();
const initStore = useInit();
const ShoppingCartStore = useShoppingCart();

const { tabbarPageIndex,AppSkin } = storeToRefs(initStore);
const { cartProductAll } = storeToRefs(ShoppingCartStore);

const cartBoxStyle = computed(() => {
	return {
		backgroundColor: AppSkin.value.primary.replace('1)', '0.05)')
	};
})

const jump = () => {
	const index = initStore.hasTabbarPage('cart');
	if (index > -1) {
		tabbarPageIndex.value = index;
	} else {
		ctx.$goTo('/pages/tabbar/shoppingCart');
	}
};

const classifyId = ref<number>(-1);
const menuList = ref<ClassifyItem[]>([]);
const menuIndex = ref(0);
const classifyListMap = ref<Map<number, ClassifyItem[]>>(new Map([]));


watch(menuIndex, (v) => {
	getClassifyTwo(menuList.value[v]?.id);
});

const getData = async () => {
	let res:PickPromise<ReturnType<typeof getGoodsClassify>>
	
	// #ifndef PRIVATE
	res = await getGoodsClassify();
	// #endif
	// #ifdef PRIVATE
	res = await getStoreGrouping({
		storeId: uni.getStorageSync('storeId')
	});
	// #endif
	menuList.value = res.data;
	res.data[0]?.id && getClassifyTwo(res.data[0]?.id);
};
const getClassifyTwo = (id: number) => {
	classifyId.value = id;
	// #ifndef PRIVATE
	getGoodsClassifyTwo(id).then((res) => {
		classifyListMap.value.set(id, res.data);
	});
	// #endif
	// #ifdef PRIVATE
	getStoreGrouping({
		storeId: uni.getStorageSync('storeId'),
		pid: id
	}).then((res) => {
		classifyListMap.value.set(id, res.data);
	});
	// #endif
};
const classifyList = computed(() => {
	let list = classifyListMap.value.get(classifyId.value);
	return list || [];
});

const handleSwitchPrev = () => {
	if (menuIndex.value > 0) {
		menuIndex.value--;
	}
};
const handleSwitchNext = () => {
	if (menuIndex.value < menuList.value.length - 1) {
		menuIndex.value++;
	}
};

getData();



</script>

<style scoped lang="scss">
@include appBem_b(classify-page-one) {
	height: 100%;
	@include appBem_e(search) {
		height: 110rpx;
		padding: 0 20rpx;

		&-body {
			padding-left: 20rpx;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 34rpx;
			background: #f7f7f7;
			margin-right: 34rpx;
		}

		&-right {
			border-radius: 100%;
		}
	}

	.classify-list {
		height: calc(100%  - 294rpx);
	}
}
</style>
